<script setup lang="ts">
import Top_nav from "./components/Top-Nav.vue";
import Bottom_nav from "./components/Btn-Nav.vue";
import SoundPlayer from "./components/SoundPlayer.vue";
import {Motion, Presence} from '@motionone/vue'

</script>

<template>
  <div>
      <Motion :initial="{ opacity: 0 }"
              :animate="{ opacity: 1}"
              :transition="{ delay: 0.1 ,easing:'ease-in-out'}"
              :exit="{ opacity: 0 }"
      >
        <top_nav class="fixed z-20 left-0 top-0"></top_nav>
        <div class="absolute  w-full left-0 top-16">
          <router-view class="md:mb-16 mb-32"></router-view>
        </div>
        <sound-player class="fixed w-full bottom-16 left-0 md:bottom-0 z-20 "></sound-player>
        <bottom_nav class="md:hidden z-20 "></bottom_nav>
      </Motion>
  </div>
</template>
<style scoped>



</style>
